<template>
	<view class="EarGrinding">
		<view class="EarGrinding-flex flex align-center padding-tb-sm bg-white">
			<view @click="navFn(0)" :class="[navValue==0 ? 'text-orange' : '']">最近</view>
			<view @click="navFn(1)" :class="[navValue==1 ? 'text-orange' : '']">英文</view>
			<view @click="navFn(2)" :class="[navValue==2 ? 'text-orange' : '']">中文</view>
			<view @click="navFn(3)" :class="[navValue==3 ? 'text-orange' : '']">收藏</view>
		</view>
		<!-- 最近 -->
		<CardAudio ref="audio" v-if="navValue===0" :list="oneValue" />
		<!-- 中英 -->
		<scroll-view v-if="navValue==1 && twoType.length>0" scroll-x class="EarGrinding-nav bg-gray nav "
			scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="item.id==tabCur?'text-orange cur':'text-gray'" v-for="(item,index) in twoType"
				:key="item.id" @click="tabSelect(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<CardEC type="EarGrinding" :label="item.name" v-for="item in twoTypeValue" :key="item.id" v-if="navValue==1 || navValue==2" >
			<CardGrid @handle="navToEarGrindingReadFn" type="EarGrinding" :list="item.list"/>
		</CardEC>
		<!-- 收藏 -->
		<CardAudio @refresh="collectionListFn" type="EarGrinding-star" ref="audio" v-if="navValue===3" :list="rbdOption.value" />
	</view>
</template>

<script>
	import CardEC from '@/plugin/card_ec.vue';
	import CardAudio from '@/plugin/card_audio.vue';
	import CardGrid from '@/plugin/card_grid.vue';

	import * as api from '@/api/EarGrinding/index.js';
	
	import  ReachBottomDistance from '@/utils/reach_bottom_distance.js'
	export default {
		mixins:[ReachBottomDistance],
		components: {
			CardEC,
			CardAudio,
			CardGrid
		},
		data() {
			return {
				// rbdReachBottom:true,
				// type=0 最近、type=1 英文、type=2 中文、type=3 收藏
				navValue: 0,
				// 最近
				oneValue:[],
				// 中英
				tabCur: 0,
				twoType: [],
				twoTypeValue: [{},{}],
			}
		},
		onHide() {
			this.hideAndUnloadFn();
		},
		onUnload() {
			this.hideAndUnloadFn();
		},
		onLoad() {
			this.navFn(0);
		},
		methods: {
			// 页面销毁
			hideAndUnloadFn(){
				let audio=this.$refs.audio;
				if(audio){
					audio.hideAndUnloadFn && audio.hideAndUnloadFn();
				}
			},
			// 跳转绘本
			navToEarGrindingReadFn(item){
				uni.navigateTo({
					url:"/pages/EarGrindingRead/index?id="+item.id
				})
			},
			// 导航切换
			navFn(value) {
				this.navValue = value;
				this.tabCur = 0;
				this.hideAndUnloadFn();
				
				switch (value * 1) {
					case 1:
						this.getCategoriesFn('en');
						break;
					case 2:
						this.getCategoriesFn('zh');
						break;
					case 3:
						this.collectionListFn();
						break;
					default:
						this.recentFn()
						break;

				}
				// this.getCategoriesFn();
			},
			// rbdMixin
			rbdReqeust(params) {
				return api.collectionList(params.page, params.pageSize);
			},
			// 我的收藏
			async collectionListFn(){
				this.rbdRefreshFn();
			},
			// 英 切换类型
			tabSelect(id) {
				this.twoTypeValue=this.$options.data().twoTypeValue;
				// 选中居中
				this.centerFn(id);
				this.getGroups(id);
			},
			// 获取二级分类数据
			async getGroups(val) {
				let res = await api.listenListCategoryId(val);
				if (res.code === 0) {
					this.twoTypeValue = res.data;
				}
			},
			// 最近
			async recentFn() {
				let res = await api.recent();
				if (res.code === 0) {
					this.oneValue=res.data;
				}
			},
			// 磨耳朵分类 中英
			async getCategoriesFn(langVal) {
				let res = await api.listenCategories(langVal);
				if (res.code === 0) {
					this.twoType = res.data;
					if (res.data.length > 0) {
						this.tabSelect(res.data[0]['id']);
					}
				}
			},
			// 居中
			centerFn(val) {
				let index = this.twoType.findIndex(item => item.id == val);
				if (index == -1) return;
				uni.pageScrollTo({
					offsetTop: 0
				})
				this.tabCur = val;
				if (index == 0) {
					this.scrollLeft = 0;
					return;
				}
				let that = this;
				uni.createSelectorQuery().selectAll('.cu-item').boundingClientRect(function(res) {
					let scrollLeft = 0;
					let center = that.windowWidth / 2 - (res[index]['width'] / 2 + 5);
					res.slice(0, index).forEach(item => scrollLeft += item.width + 10);
					if (center && scrollLeft > center) {
						that.scrollLeft = scrollLeft - center
					} else {
						that.scrollLeft = scrollLeft;
					}
				}).exec(function() {
					//上述布局位置信息获取成功后执行的回调函数
				})
			}

		}
	}
</script>

<style lang="scss">
	.EarGrinding {
		.EarGrinding-nav {
			position: sticky;
			z-index: 100;
			top: -2upx;
		}

		.EarGrinding-flex {
			>view {
				flex: 1;
				text-align: center;
				position: relative;

				&::after {
					content: "";
					display: block;
					height: 100%;
					border-right: 2upx solid #000;
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			&>view:last-child {
				&::after {
					display: none;
				}
			}
		}

}
</style>